<template>
  <div class="cell-storage-form">
    <h2>批量导入</h2>

    <div class="import-container">
      <!-- 上传区域 -->
      <div class="upload-area" @dragover.prevent="dragover" @drop.prevent="drop">
        <input
          type="file"
          id="fileInput"
          ref="fileInput"
          @change="handleFileChange"
          accept=".xlsx,.xls,.csv"
          style="display: none"
        >
        <div class="upload-content" @click="triggerFileInput">
          <div class="upload-icon">
            <i class="el-icon-upload"></i>
          </div>
          <div class="upload-text">点击或拖拽文件到此处上传</div>
          <div class="upload-hint">支持格式: .xlsx, .xls, .csv</div>
        </div>
        <div v-if="selectedFile" class="selected-file">
          <span>{{ selectedFile.name }}</span>
          <button @click="removeFile" class="btn-remove">×</button>
        </div>
      </div>

      <!-- 模板下载 -->
      <div class="template-section">
        <h3>下载模板</h3>
        <button @click="downloadTemplate" class="btn-download">
          <i class="el-icon-download"></i> 下载导入模板
        </button>
      </div>

      <!-- 导入按钮 -->
      <div class="import-actions">
        <button
          @click="submitImport"
          :disabled="!selectedFile"
          class="btn-import"
        >
          <i class="el-icon-upload2"></i> 开始导入
        </button>
      </div>

      <!-- 导入历史 -->
      <div v-if="importHistory.length > 0" class="history-section">
        <h3>导入历史</h3>
        <table class="history-table">
          <thead>
            <tr>
              <th>日期</th>
              <th>文件名</th>
              <th>导入数量</th>
              <th>操作人</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in importHistory" :key="index">
              <td>{{ item.date }}</td>
              <td>{{ item.filename }}</td>
              <td>{{ item.count }}</td>
              <td>{{ item.operator }}</td>
              <td :class="'status-' + item.status">
                {{ item.status === 'success' ? '成功' : '失败' }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectedFile: null,
      importHistory: [
        {
          date: '2023-05-15',
          filename: 'cells_20230515.xlsx',
          count: 25,
          operator: '张三',
          status: 'success'
        },
        {
          date: '2023-05-10',
          filename: 'cells_20230510.csv',
          count: 18,
          operator: '李四',
          status: 'success'
        }
      ]
    }
  },
  methods: {
    triggerFileInput () {
      this.$refs.fileInput.click()
    },
    handleFileChange (e) {
      const file = e.target.files[0]
      if (file) {
        this.validateAndSetFile(file)
      }
    },
    dragover () {
      // 可以添加拖拽时的视觉效果
    },
    drop (e) {
      const file = e.dataTransfer.files[0]
      if (file) {
        this.validateAndSetFile(file)
      }
    },
    validateAndSetFile (file) {
      const validTypes = [
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'application/vnd.ms-excel',
        'text/csv'
      ]

      if (!validTypes.includes(file.type)) {
        this.$message.error('请上传Excel或CSV文件')
        return
      }

      this.selectedFile = file
    },
    removeFile () {
      this.selectedFile = null
      this.$refs.fileInput.value = ''
    },
    downloadTemplate () {
      // 模板下载逻辑
      this.$message.info('模板下载功能将在后端实现')
    },
    submitImport () {
      if (!this.selectedFile) return

      // 模拟上传过程
      this.$message.info('开始导入: ' + this.selectedFile.name)

      // 模拟上传成功
      setTimeout(() => {
        this.importHistory.unshift({
          date: new Date().toLocaleDateString(),
          filename: this.selectedFile.name,
          count: Math.floor(Math.random() * 30) + 1,
          operator: '当前用户',
          status: 'success'
        })

        this.selectedFile = null
        this.$refs.fileInput.value = ''
        this.$message.success('导入成功')
      }, 1500)
    }
  }
}
</script>

<style scoped>
.import-container {
  max-width: 800px;
  margin: 0 auto;
}

.upload-area {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}
.cell-storage-form {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%)
}
.upload-area:hover {
  border-color: #007bff;
  background-color: #f9f9f9;
}

.upload-content {
  margin-bottom: 15px;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 10px;
  color: #007bff;
}

.upload-text {
  font-size: 18px;
  margin-bottom: 5px;
}

.upload-hint {
  color: #666;
  font-size: 14px;
}

.selected-file {
  margin-top: 15px;
  padding: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}

.btn-remove {
  margin-left: 10px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
}

.btn-remove:hover {
  color: #f56c6c;
}

.template-section {
  text-align: center;
  margin-bottom: 30px;
}

.btn-download {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-download:hover {
  background-color: #0069d9;
}

.import-actions {
  text-align: center;
  margin-bottom: 30px;
}

.btn-import {
  padding: 10px 24px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-import:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.history-table th, .history-table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

.history-table th {
  background-color: #f2f2f2;
}

.status-success {
  color: #28a745;
  font-weight: bold;
}

.status-failure {
  color: #dc3545;
  font-weight: bold;
}

h3 {
  margin: 20px 0 10px;
  color: #333;
}
</style>
